<template>
	<view>
		<image src="/static/work1.jpg" mode="" class="img_bg"></image>
		<view class="mask" v-show="mask_show">

		</view>
		<view class="card1">
			<view v-show="false">
				<button type="default" @click="beginCanvas">开始绘图</button>
			</view>
			<image v-show="false" :src="canvasUrl" mode="widthFix"></image>
			<mosowe-canvas-image ref="mosoweCanvasComponents" @canvasImage="_canvasImage" :lists="lists"
				:height="lists[0].height" :width="lists[0].width" />
		</view>
		<view class="" style="position: absolute; top: 0; width: 100%; border-radius: 2%;">
			<view class="border-bottom bg_white margin-t30 margin-l10 margin-r10">
				<view class="display justify-between align-center">
					<view class="text-36 padding-t30 padding-b30">整改照片</view>
					<view class="text-24 font-gray">图片大小限制500K,请勿上传无关内容。</view>
				</view>
				<view class="display align-center padding-b30">
					<image :src="phone" class="addImage padding-r10" v-if="phone!=''" @tap="previewImage(1)"></image>
					<image src="/static/add.png" class="addImage" @tap="upAdd()"></image>
				</view>
			</view>
			<view class="border-bottom display justify-between align-center bg_white margin-l10 margin-r10">
				<view class="text-36 padding-t30 padding-b30">整改人</view>
				<view class="text-32 font-gray1 padding-r30">{{rectify_user?rectify_user:'-'}}</view>
			</view>
			<view class="border-bottom bg_white margin-l10 margin-r10">
				<view class="text-36 padding-t30 padding-b30">整改措施描述</view>
				<view class="display align-center">
					<!-- <textarea value="" placeholder="" /> -->
					<textarea maxlength="-1"  placeholder="请输入描述信息..." name="content" v-model="content"
						placeholder-style="color:#999;font-size:28upx;" />
				</view>
			</view>
			<view class="margin-l10 margin-r10">
				<button @click="sign()" class="loginButton margin-t30" :disabled="disable_check">提交</button>
			</view>
		</view>
	</view>
</template>

<script>
	import amap from '../../../../components/amap-wx.130.js'
	import mosowe_canvas_image from "@/components/mosowe-canvas-image/mosowe-canvas-image.vue"
	export default {
		components: {
			mosowe_canvas_image
		},
		data() {
			return {
				uid: '',
				token: '',
				rectify_remarks: '', //整改备注
				rectify_img: '', //整改图片
				sird_id: '',
				id: '',
				nickname: '',
				rectify_user: '',
				phone: '',
				content: '',
				disable_check: false,
				lists: [{
						type: 'image',
						content: '',
						width: 100,
						height: 200,
						size: 10,
						x: 0,
						y: 0,
						align: 'left',
						arc: false,
						arcX: 30,
						arcY: 20,
						arcR: 20
					},

					{
						type: 'text',
						content: '姓名',
						width: 100,
						height: 200,
						x: 10,
						y: 30,
						color: '#ffffff',
						size: 15,
						// maxWidth: 100, 
						// align: 'left', 
					},
					{
						type: 'text',
						content: '时间',
						width: 100,
						height: 200,
						x: 10,
						y: 20,
						color: '#ffffff',
						size: 15,
						// maxWidth: 100, 
						// align: 'left', 
					},
					{
						type: 'text',
						content: '地点',
						width: 100,
						height: 200,
						x: 10,
						y: 20,
						color: '#ffffff',
						size: 15,
						// maxWidth: 100, 
						// align: 'left', 
					},
				],
				canvasUrl: '',
				percent: '',
				amapPlugin: null,
				key: '7992d23027ebe8a1b4a812fcac91bfbf',
				addressName: '',
				mask_show: false
			}
		},
		onLoad(options) {
			this.nickname = uni.getStorageSync('user').nickname
			this.uid = uni.getStorageSync('user').uid;
			this.token = uni.getStorageSync('user').token;
			this.lists[1].content = '姓名：' + uni.getStorageSync('user').nickname
			this.lists[3].content = '地点：' + uni.getStorageSync('addressName')
			console.log(this.lists[3].content)
			console.log(this.lists[1].content)
			console.log(options)
			this.sird_id = options.sird_id
			this.id = options.id
			this.rectify_user = options.rectify_user
			console.log(this.sird_id)
			console.log(this.id)
			console.log(this.rectify_user)
			this.ckeck()
		},
		methods: {
			previewImage: function(index) {
				var a = {}
				Array.from(a)
				console.log(a)
				a[0] = this.phone
				console.log(a)
				var nameArray = []
				for (var i in a) {
					nameArray.push(a[i])
				}
				console.log(nameArray)
				uni.previewImage({
					current: index,
					urls: nameArray,
					success: function(res) {
						console.log(res)
					},
					fail: function(res) {
						console.log(res)
					}
				})
			},
			upAdd() {
				this.mask_show = true
				let that = this
				uni.chooseImage({
					count: 1,
					sizeType: ['compressed'],
					sourceType: ['camera', 'album'],
					success: res => {

						uni.showLoading({
							title: '图片上传中',
							mask: true
						})
						console.log('准备开始上传图片')
						console.log(res)
						// console.log(JSON.stringify(res.tempFilePaths));
						const tempFilePaths = res.tempFilePaths;
						uni.getImageInfo({
							src: res.tempFilePaths[0],
							success: function(image) {
								console.log(image.width);
								// 画图的布局
								that.lists[0].width = image.width + 20
								that.lists[0].height = image.height + 20
								that.lists[1].y = image.height - 60
								that.lists[2].y = image.height
								that.lists[3].y = image.height - 30
								console.log(that.lists[0].height);
							},
							fail: function(res) {
								console.log('失败了')
								console.log(res)
							}
						});
						const uploadTask = uni.uploadFile({
							url: 'https://aqmore.sxpz.vip/AppApi/Public/uploadImg?c=uperTest',
							filePath: tempFilePaths[0],
							name: 'file',
							formData: {
								'user': 'test'
							},
							success: uploadFileRes => {
								that.getTime()
								that.canvasUrl = (uploadFileRes.data).replace("http:", "https:")
								that.lists[0].content = (uploadFileRes.data).replace("http:",
									"https:")
								console.log(that.canvasUrl)
								setTimeout(function() {
									that.beginCanvas()
								}, 500)
							}
						})
					},
					fail: function() {
						that.mask_show = false
					}
				})
			},
			getTime: function() {
				var date = new Date(),
					year = date.getFullYear(),
					month = date.getMonth() + 1,
					day = date.getDate(),
					hour = date.getHours() < 10 ? "0" + date.getHours() : date.getHours(),
					minute = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes(),
					second = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
				month >= 1 && month <= 9 ? (month = "0" + month) : "";
				day >= 0 && day <= 9 ? (day = "0" + day) : "";
				var timer = year + '-' + month + '-' + day + ' ' + hour + ':' + minute + ':' + second;
				console.log(timer)
				this.lists[2].content = '时间：' + timer
				return timer;
			},
			beginCanvas() {
				this.$refs.mosoweCanvasComponents.createCanvas();
			},
			_canvasImage(e) {
				var that = this
				uni.uploadFile({
					url: 'https://aqmore.sxpz.vip/AppApi/Public/uploadImg?c=uperTest',
					filePath: e,
					name: 'file',
					formData: {
						'user': 'test'
					},
					success: uploadFileRes => {
						uni.hideLoading()
						that.mask_show = false
						console.log(uploadFileRes.data)
						that.phone = (uploadFileRes.data)
						console.log(that.phone)
					},
					fail: function(res) {
						console.log(res)
					}
				})
			},
			ckeck() {
				if (this.nickname != this.rectify_user) {
					this.disable_check = true
				}
			},
			async sign() {
				this.disable_check = true
				var that = this;
				if (this.phone == '') {
					uni.showToast({
						title: '请上传整改照片',
						icon: 'none'
					})
					this.disable_check = false
					return false
				} else if (this.content == '') {
					uni.showToast({
						title: '请填写整改措施',
						icon: 'none'
					})
					this.disable_check = false
					return false
				}
				console.log(this.content)
				console.log(this.phone)
				const {
					data: res
				} = await this.$myRequest({
					url: '/SafetyInspection/setRectification',
					method: 'GET',
					data: {
						uid: this.uid,
						token: this.token,
						id: this.id,
						sird_id: this.sird_id,
						rectify_remarks:this.content,
						rectify_img:this.phone
					}
				});
				console.log(res)
				uni.showToast({
					title: res.datas.msg,
					icon: 'none'
				})
				setTimeout(() => {
					uni.switchTab({
						url: '../../workspace'
					})
				}, 1500)
				
				
				/* uni.request({
					url: 'https://aqmore.sxpz.vip/AppApi/SafetyInspection/setRectification?uid=' + this.uid +
						'&token=' + this.token + '&id=' + this.id + '&sird_id=' + this.sird_id +
						'&rectify_remarks=' + this.content + '&rectify_img=' + this.phone,
					method: 'GET',
					header: {
						'content-type': 'application/x-www-form-urlencoded'
					},
					success: function(e) {
						console.log(e)
						that.disable_check = true
						uni.showToast({
							title: e.data.datas.msg,
							icon: 'success'
						})
						setTimeout(() => {
							uni.switchTab({
								url: '../../workspace'
							})
						}, 1500)
					},

				}) */

			}


		}
	}
</script>

<style>
	.mask {
		position: fixed;
		top: 0;
		left: 0;
		z-index: 999;
		width: 100%;
		height: 100vh;
		background: rgba(0, 0, 0, 0.4);

	}

	.loginButton {
		height: 98upx;
		line-height: 98upx;
		background: #65caff;
		box-shadow: 0 2upx 10upx 0 rgba(115, 241, 255, 0.8);
		border-radius: 49upx;
		color: #fff;
		text-align: center;
		z-index: 99;
		position: relative;
	}
</style>
